<template>
  <view class="almost-lottery">
	<titleBar :titleText='"积分抽奖"' :pageForm='"setting"'></titleBar>
    <!-- head -->
    <view class="almost-lottery__head">
      <view :class="['action', isApple && 'action-shadow']">
        <text class="gold"></text>
        <text class="content">我的积分：<text class="num">{{ integral }}</text></text>
      </view>
      <view class="tip"><text class="tip-content">每次抽奖消耗 {{ integralNum }} 积分，不限次数</text></view>
    </view>
    <!-- action -->
    <!-- <view class="almost-action" @tap="handleInitCanvas" v-if="isDev">
      <text class="text">重新生成画板-开发模式使用</text>
    </view> -->
    <!-- lottery -->
    <view class="almost-lottery__wheel">
      <almost-lottery
        :canvasWidth="canvasData.width"
        :canvasHeight="canvasData.height"
        :ringCount="2"
        :duration="1"
        :prizeList="prizeList"
        :prizeIndex="prizeIndex"
        @reset-index="prizeIndex = -1"
        @draw-start="handleDrawStart"
        @draw-end="handleDrawEnd"
        @finish="handleDrawFinish"
        v-if="prizeList.length"
      />
      <text class="tip" v-else>奖品准备中...</text>
    </view>
    <!-- rule -->
    <view class="almost-lottery__rule">
      <view class="rule-head">
        <view class="line"></view>
        <text class="title">活动规则</text>
        <view class="line"></view>
      </view>
      <view class="rule-body">
        <view class="item">
          <view class="number">1</view>
          <view class="text">
            <text>抽奖细则：</text>
            <text>每次消耗{{ integralNum }}积分。</text>
          </view>
        </view>
        <view class="item item-rule">
          <view class="number">2</view>
          <view class="text">
            <text>奖励说明：</text>
            <text>a.积分奖：中奖后系统会自动增加账户积分。</text>
            <text>b.实物奖：中奖后需联系客服领取。</text>
          </view>
        </view>
        <template v-if="isApple">
          <view class="item"><view class="number">3</view><view class="text">本次活动由{{activityFirm}}发起，与Apple.Inc无关。</view></view>
          <view class="item"><view class="number">4</view><view class="text">苹果公司不是本活动的赞助商且没有以任何形式参与活动。</view></view>
          <view class="item"><view class="number">5</view><view class="text">本活动仅限17岁以上用户参加。</view></view>
          <view class="item"><view class="number">6</view><view class="text">本活动最终解释权归{{activityFirm}}所有。</view></view>
        </template>
        <template v-else>
          <view class="item"><view class="number">3</view><view class="text">本次活动由{{activityFirm}}发起。</view></view>
          <view class="item"><view class="number">4</view><view class="text">本活动仅限17岁以上用户参加。</view></view>
          <view class="item"><view class="number">5</view><view class="text">本活动最终解释权归{{activityFirm}}所有。</view></view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
  import { clearCacheFile } from '@/uni_modules/almost-lottery/utils/almost-utils.js'
  import titleBar from '../../../components/customize/titlebar.vue'
  export default {
    name: 'Home',
    components: {
      AlmostLottery,
	  titleBar
    },
    data () {
      return {
        // 开启调试模式
        isDev: true,
        // 以下是抽奖配置相关数据
        // canvas 宽高
        canvasData: {
          width: 280,
          height: 280
        },
        // 奖品数据
        prizeList: [],
        // 中奖下标
        prizeIndex: -1,
        // 是否正在抽奖中，避免重复触发
        prizeing: false,
        // 以下为中奖概率有关数据
        // 积分
        integral: 0,
        // 每次消耗的积分
        integralNum: 20,
		activityFirm:'',
      }
    },
    computed: {
      isApple () {
        return uni.getSystemInfoSync().platform === 'ios'
      }
    },
	onShow(){
		this.$u.api.lotteryConfig().then((res) => {
			debugger
			if (res.code != 200){
				uni.showToast({
					title: res.msg
				})
			}
			this.integral = res.data.integral;
			this.integralNum = res.data.integralNum;
			this.activityFirm = res.data.activityFirm;
		})
	},
    methods: {
      // 重新生成
      handleInitCanvas () {
		clearCacheFile()
        this.prizeList = []
        this.getPrizeList()
				
      },
      // 获取奖品列表
      async getPrizeList () {
        uni.showLoading({
          title: '奖品准备中...'
        })	
		this.$u.api.lotteryList().then((res) => {
			uni.hideLoading()
			debugger
			if (res.code != 200){
				uni.showToast({
					title: res.msg
				})
			}
			if (res.data.length) {
				// stock 奖品库存
				// weight 中奖概率，数值越大中奖概率越高
				this.prizeList = res.data
				console.log('已获取到奖品列表数据，开始绘制抽奖转盘')
			}
			
		})
      },
      // 本次抽奖开始
      handleDrawStart () {
        console.log('触发抽奖按钮')
        if (this.prizeing) return
        this.prizeing = true
        // 还有免费数次或者剩余积分足够抽一次
        if (this.integral >= this.integralNum) {
          this.tryLotteryDraw()
        } else {
          this.prizeing = false
          uni.showModal({
            title: '积分不足',
            content: '当前积分不足？',
            success: (res) => {
              console.log('积分不足', res)
            }
          })
        }
      },
      // 尝试发起抽奖
      tryLotteryDraw () {
        console.log('旋转开始，获取中奖下标......')
		this.remoteGetPrizeIndex()
      },
      // 远程请求接口获取中奖下标
      remoteGetPrizeIndex () {
		this.$u.api.lotteryIndex().then((res) => {
			if (res.code != 200){
				this.$u.toast(res.msg);
				return;
			}
			this.prizeIndex = res.data;
			console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].name)
			// 如果奖品设有库存
			if (this.prizeList[this.prizeIndex].switchBuckle == '1') {
				console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].stock)
			}
		})
      },
      // 本次抽奖结束
      handleDrawEnd () {
		if (this.integral >= this.integralNum){
			this.integral -= this.integralNum
		}
        // 旋转结束后，开始处理拿到结果后的逻辑
        this.prizeing = false
        let prizeName = this.prizeList[this.prizeIndex].name
        let tipContent = ''
		if (prizeName === '谢谢参与') {
			  tipContent = '很遗憾，没有中奖，请再接再厉！'
		} else {
			  if (this.prizeList[this.prizeIndex].switchBuckle == '1') {
			  	let prizeStock = this.prizeList[this.prizeIndex].stock
			  	tipContent = prizeStock ? `恭喜您，获得 ${prizeName}` : '很抱歉，您来晚了，当前奖品已无库存'
			  } else {
				tipContent = `恭喜您，获得${prizeName}！`
			  }
        }
        uni.showModal({
          content: tipContent,
          showCancel: false
        })
      },
      // 抽奖转盘绘制完成
      handleDrawFinish (res) {
        console.log('抽奖转盘绘制完成，可以开始抽奖啦', res)
        uni.showToast({
          title: res.msg,
			duration: 2000,
			mask: true,
			icon: 'none'
        })
      }
    },
    onLoad () {
      // 请求奖品数据
      this.getPrizeList()
    },
    onUnload () {
      uni.hideLoading()
    }
  }
</script>

<style lang="scss" scoped>
  .almost-lottery {
    flex: 1;
    background-color: #FF893F;
  }
  
  .almost-lottery__head {
    position: relative;
    width: 100%;
    height: 640rpx;
    background: url('~static/img/lottery/top-bg.png') no-repeat center center/cover;
    .action {
      position: relative;
      top: 400rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 480rpx;
      height: 88rpx;
      line-height: 88rpx;
      margin: 0 auto;
      color: #FFFFFF;
      font-size: 32rpx;
      background-color: rgba(255, 136, 61, 1);
      border-radius: 44rpx;
    }
    .action-shadow {
      box-shadow: 0px 14rpx 0px 0px rgba(235, 112, 36, 1);
    }
    .gold {
      width: 44rpx;
      height: 44rpx;
      margin-right: 10rpx;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      background-image: url("~static/img/lottery/gold.png");
      
      @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
        background-image: url("~static/img/lottery/gold@2x.png");
      }
      
      @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url("~static/img/lottery/gold@3x.png");
      }
    }
    .num {
      color: #F9FC31;
    }
    .tip {
      position: relative;
      top: 428rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      text-align: center;
    }
  }
  
  .almost-lottery__wheel {
    text-align: center;
    .tip {
      color: #FFFFFF;
      font-size: 24rpx;
    }
    .count {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 40rpx 0;
    }
    .text {
      color: #FFFFFF;
      font-size: 24rpx;
    }
  }
  
  .almost-lottery__rule {
    padding: 0 28rpx;
    color: #FFF8CB;
    .rule-head {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 40rpx 0;
      .line {
        flex: 1;
        height: 1px;
        background-color: #FFF3A5;
      }
      .title {
        width: 280rpx;
        color: #F63857;
        line-height: 70rpx;
        text-align: center;
        margin: 0 20rpx;
        border-radius: 8rpx;
        background-image: linear-gradient(0deg,rgba(255,242,158,1),rgba(255,244,168,1));
      }
    }
    .rule-body {
      color: #FFF8CB;
      font-size: 24rpx;
      padding: 10rpx 0 40rpx;
      .item {
        display: flex;
        margin-bottom: 10rpx;
      }
      .number {
        position: relative;
        top: 4rpx;
        width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        text-align: center;
        color: #F63857;
        background: #FFF8CB;
        border-radius: 50%;
        margin-right: 10rpx;
      }
      .text {
        flex: 1;
      }
      .item-rule .text {
        display: flex;
        flex-direction: column;
      }
    }
  }
  
  .almost-action {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 400rpx;
    height: 80rpx;
    border-radius: 10rpx;
    text-align: center;
    background-color: red;
    margin: 0 auto 40rpx;
    .text {
      color: #FFFFFF;
      font-size: 28rpx;
    }
  }
</style>
